<template>
   <div style="height:100%;">
    <div>
      <div class='content-title'>
        <div class='content-title-parent'>用户平台</div>
        /
        <div class='content-title-child'>意见反馈</div>
      </div>
      <hr class='content-hr'/>
    </div>
    <!--表格筛选条件-->
    <el-row style="margin-top:10px" class='lostManaClass'>
      <el-form v-model="filterForm" ref="filterForm":inline="true">
        <el-form-item label="类型：">
          <!-- <el-checkbox-group v-model="filterForm.typeList">
            <el-checkbox label="机场服务"></el-checkbox>
            <el-checkbox label="APP使用"></el-checkbox>
            <el-checkbox label="其它"></el-checkbox>
          </el-checkbox-group> -->
          <el-checkbox-group 
            v-model="filterForm.typeList">
            <el-checkbox v-for="item in typeLists" :value="item.feedbackTypeId" :label="item.feedbackTypeId" :key="item.feedbackTypeId">{{item.feedbackTypeName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="状态：" >
          <el-checkbox-group v-model="filterForm.statusList">
            <el-checkbox label="已处理"></el-checkbox>
            <el-checkbox label="待处理"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="提交时间：">
          <el-date-picker
            v-model="filterForm.SubmitTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            style="width:380px"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" style="background-color:#2280E9;border-color:#2280E9;width:60px;" @click="submitSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!--表格数据-->
    <el-row>
      <el-table
        :data="filterFormFro.tableData" 
        :border="true"
        :row-class-name="tableRowClassName"
        class="lostManaTableClass"
        :header-cell-class-name = "tableHeaderClassName"
        :cell-class-name="tabelCellClassName"
        v-bind:style="{width: tableWidth + 'px'}">
          <el-table-column prop="index" label="序号" min-width="6%">
          </el-table-column>
          <el-table-column prop="feedbackTypeName" label="类型" min-width="10%">
          </el-table-column>
          <el-table-column prop="airportName" label="所属机场" min-width="10%" >
          </el-table-column>
          <el-table-column prop="content" label="反馈内容" min-width="20%">
          </el-table-column>
          <el-table-column prop="phoneNum" label="联系方式" min-width="12%">
          </el-table-column>
          <el-table-column prop="SubmitTime" label="提交时间" min-width="12%" >
          </el-table-column>
          <el-table-column prop="state" label="状态" min-width="8%">
          </el-table-column>
          <el-table-column prop="note" label="备注" min-width="10%" >
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleOperate(scope.$index, scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 表格下方分页 -->
    <el-row>
      <div class="pagination" style="text-align:center" v-show="paginationVisible">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          :page-size="15"
          :current-page="filterForm.pageNum"
          layout="total, prev, pager, next"
          :page-count="filterFormFro.allPages">
        </el-pagination>
      </div>
    </el-row>
    <!-- 处理意见反馈信息弹窗 -->
    <el-dialog title="处理意见反馈"   :visible.sync="operateVisable"
        :closeOnClickModal="false" 
        width="550px"
        class="categoryManaDialog"
        :close-on-click-modal="false" 
        :close-on-press-escape="false">
      <el-form :model='operateForm' ref="operateForm" label-width="170px">
          <el-form-item label="类型："  prop="feedbackType">
            <label style="width:240px">{{operateForm.feedbackType}}</label>
          </el-form-item>
          <el-form-item label="所在机场："  prop="airport">
            <label  style="width:240px">{{operateForm.airport}}</label>
          </el-form-item>
          <el-form-item label="反馈内容："  prop="content">
            <label  style="width:240px">{{operateForm.content}}</label>
          </el-form-item>
          <el-form-item label="联系方式："  prop="phoneNum" >
            <label  style="width:240px">{{operateForm.phoneNum}}</label>
          </el-form-item>
          <el-form-item label="状态："  prop="state">
            <el-radio-group v-model="operateForm.state"  style="width:240px">
              <el-radio label="待处理"></el-radio>
              <el-radio label="已处理"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注："  prop="note" >
            <el-input
              style="width:240px"
              type="textarea"
              :rows="3"
              v-model.trim="operateForm.note">
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" style="width:240px" @click="operateCouponListFro()">提 交</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
    </div>
</template>
<script>
import '../../../static/css/businessPlat/lostMana.css'
import '../../../static/css/businessPlat/common.css'
import apiBus from '../../api/businessPlat/apiBus.js'
export default {
  created () {
    this.init() // 初始化查询数据
    this.gettypeListFro()
    this.getFeedbackListFro()
  },
  data () {
    return {
      tableWidth: '',
      typeLists: [], // 意见反馈类型列表
      pickerOptions: { // 时间选择器默认'一周''一个月'
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      filterForm: { // 筛选表单
        SubmitTime: [],  // 提交时间区间
        typeList: [], // 类型
        statusList: ['已处理', '待处理'], // 状态
        pageNum: 1 // 当前页数
      },
      filterFormFro: { // 回参
        tableData: [],
        allPages: 0 // 总共页数
      },
      noteVisible: false,
      formLabelWidth: '30%',
      operateForm: {
        feedbackId: '',
        SubmitTime: '',
        feedbackType: '这是类型',
        airport: '',
        content: '这是馈内容这是反馈内容这是反馈内容这是反馈内容这是反馈内容这是反馈内容这是反馈内容这是反馈内容',
        phoneNum: '',
        state: '',
        note: ''
      },
      paginationVisible: false, // 表格下方分页是否显示
      operateVisable: false,
      testData: [],
      testData2: [],
      editForm: {
        couponId: '',
        couponName: '',
        value: '',
        isFixed: '',
        airportName: '',
        businessName: '',
        peopleLimit: '1',
        fullUse: '',
        onlineTime: '',
        effectiveTime: '',
        expireTime: '',
        limitNum: '',
        issuedNum: '',
        issuedType: '1',
        takenNum: '',
        isDelete: ''
      },
      deleteForm: {
        label: '',
        num: '',
        number: ''
      }
    }
  },
  methods: {
    /** ********************************* 提交后台相关函数 ************************************* */
    // 向后台查询意见反馈列表
    getFeedbackListFro () {
      let SubmitTime = ''
      if (this.filterForm.SubmitTime && this.filterForm.SubmitTime.length > 0) {
        SubmitTime = this.formatDateFro(this.filterForm.SubmitTime[0]) + '/' + this.formatDateFro(this.filterForm.SubmitTime[1])
      }
      let para = {
        header: JSON.stringify({
          token: sessionStorage.getItem('token'),
          beanId: 'feedbackService_v1'
        }),
        body: JSON.stringify({
          time: SubmitTime, // 提交时间
          type: this.filterForm.typeList, // 类型
          status: this.filterForm.statusList, // 状态
          page: parseInt(this.filterForm.pageNum),
          pageSize: 15
        })
      }
      apiBus.getFeedbackList(para).then(res => {
        this.filterFormFro.tableData = []
        if (res.data.body.result === 1000) {
          let resData = res.data.body.content
          if (resData.list.length > 0) {
            this.filterFormFro.tableData = resData.list
            this.filterFormFro.allPages = resData.pages
            for (let i = 0; i < resData.list.length; i++) {
              this.filterFormFro.tableData[i].index = (parseInt(this.filterForm.pageNum) - 1) * 15 + (i + 1)
              this.filterFormFro.tableData[i].SubmitTime = this.formatDateFro(new Date(this.filterFormFro.tableData[i].submitTime))
            }
            this.filterFormFro.allPages > 1 ? this.paginationVisible = true : this.paginationVisible = false
            this.$message.success('成功获取意见反馈列表！')
          } else {
            this.$message.warning('没有任何意见反馈数据！')
          }
        } else {
          this.$message.error(res.data.body.resultDesp)
        }
      })
      .catch(error => {
        this.$message.error(error)
      })
    },
    // 向后台查询意见反馈类型列表
    gettypeListFro () {
      let para = {
        header: JSON.stringify({
          token: sessionStorage.getItem('token'),
          beanId: 'feedbackService_v1'
        }),
        body: JSON.stringify({})
      }
      apiBus.gettypeList(para).then(res => {
        if (res.data.body.result === 1000) {
          if (res.data.body.content.list.length > 0) {
            this.typeLists = res.data.body.content.list
            for (let i = 0; i < res.data.body.content.list.length; i++) {
              this.filterForm.typeList.push(res.data.body.content.list[i].feedbackTypeId)
            }
            this.getFeedbackListFro()
          } else {
            this.$message.warning('没有任何意见反馈类型！')
          }
        } else {
          this.$message.error(res.data.body.resultDesp)
        }
      })
      .catch(error => {
        this.$message.error(error)
      })
    },
    // 处理意见反馈列表
    operateCouponListFro () {
      let para = {
        header: JSON.stringify({
          token: sessionStorage.getItem('token'),
          beanId: 'feedbackService_v1'
        }),
        body: JSON.stringify({
          feedbackId: this.operateForm.feedbackId,
          status: this.operateForm.state,
          note: this.operateForm.note
        })
      }
      apiBus.operateCouponList(para).then(res => {
        if (res.data.body.result === 1000) {
          this.filterForm.pageNum = 1
          this.getFeedbackListFro()
          this.$message.success('成功处理意见反馈！')
          this.operateVisable = false
        } else {
          this.$message.error(res.data.body.content.resultDesp)
        }
      })
      .catch(error => {
        this.$message.error(error)
      })
    },
    /** *************************** 页面显示，数据格式转换相关函数 ************************** */
    // 初始化查询数据
    init () {
      let end = new Date()
      let start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      this.filterForm.SubmitTime[0] = start
      this.filterForm.SubmitTime[1] = end
    },
    // 将时间转化为字符串
    formatDateFro (now) {
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var date = now.getDate()
      date = date < 10 ? ('0' + date) : date
      var hour = now.getHours()
      hour = hour < 10 ? ('0' + hour) : hour
      var minute = now.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      var second = now.getSeconds()
      second = second < 10 ? ('0' + second) : second
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    },
    // 根据数据内容设置表格“状态”样式
    tabelCellClassName ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 6) {
        if (row.state === '已处理') {
          return 'cellClass'
        } else {
          return 'cellClassNo'
        }
      }
    },
    // 分页页面跳转时
    handleCurrentChange (val) {
      this.filterForm.pageNum = val
      this.getFeedbackListFro()
    },
    setAddFro () {
      this.addVisable = false
      this.$message.success('优惠券添加成功')
    },
    setEditFro () {
      this.editVisable = false
      this.$message.success('优惠券编辑成功')
    },
    changeCategory () {
      this.$message.error('分类选择：' + this.filterForm.category)
    },
    tableHeaderClassName ({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'headerClass'
      }
    },
    tableRowClassName ({row, rowIndex}) {
      return 'rowClass'
    },
    // 选完筛选条件后点击“查询”
    submitSearch () {
      this.filterForm.pageNum = 1
      this.getFeedbackListFro()
    },
    // 点击表格中的“处理”按钮
    handleOperate (index, row) {
      let data = this.filterFormFro.tableData[index]
      this.operateForm.SubmitTime = data.submitTime
      this.operateForm.feedbackId = data.feedbackId
      this.operateForm.feedbackType = row.feedbackTypeName
      this.operateForm.airport = row.airportName
      this.operateForm.content = row.content
      this.operateForm.phoneNum = row.phoneNum
      this.operateForm.state = row.state
      this.operateForm.note = row.note
      this.operateVisable = true
    },
    handleDelete (index, row) {
      this.deleteForm.couponName = row.couponName
      this.deleteForm.couponId = row.couponId
      this.noteVisible = true
    },
    cancleEdit (formName) {
      this.resetError(formName)
      this.editVisable = false
    },
    // 重置表单
    resetError (formName) {
      this.$nextTick(function () {
        this.$refs[formName].resetFields()
      })
    },
    setDeleteFro () {
      this.noteVisible = false
      this.$message.success('优惠券<' + this.deleteForm.couponName + '>已删除')
    }
  },
  mounted () {
    this.tableWidth = document.body.scrollWidth - 259 - 20
  }
}
</script>